<style lang="less" scoped src="./article.less"></style>
<script src="./article.js"></script>

<template>
    <div>
        <Row>
            <Col span="6">
            <Row class="query">
                <Col span="6">文章标题：</Col>
                <Col span="18">
                <Input v-model="queryCon.title" clearable ></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">活动名称：</Col>
                <Col span="18">
                <Input v-model="queryCon.activityname" clearable ></Input>
                </Col>
            </Row>
            </Col>
            <Col span="6">
            <Row class="query">
                <Col span="6">是否发布：</Col>
                <Col span="18">
                <Select v-model="queryCon.releases" filterable clearable>
                    <Option :value="1">是</Option>
                    <Option :value="2">否</Option>
                </Select>
                </Col>
            </Row>
            </Col>
        </Row>
        <Row class="query">
            <Col span="22">
            <span @click="loadList"><Button type="primary" icon="android-search">查询</Button></span>
            <span @click="refresh"><Button type="primary" icon="refresh">清空</Button></span>
            </Col>
            <Col span="2">
            <span @click="showAdd"><Button type="primary" icon="android-add">新增</Button></span>
            </Col>
        </Row>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="viewModalVisible"
                title="文章详情"
                @on-ok="viewModalVisible = false"
                @on-cancel="viewModalVisible = false"
                width="60%"
                :mask-closable="false"
                :styles="{top: '20px'}">
            <div class="modal-div">
                <Form :model="formData" :label-width="70">
                    <FormItem label="文章标题">
                        <div class="conts" style="width: 50%;text-align: center;">{{formData.title}}</div>
                    </FormItem>
                    <FormItem label="活动">
                        <div class="conts" style="width: 50%;text-align: center;">{{formData.activity ? formData.activity.name : ''}}</div>
                    </FormItem>
                    <FormItem label="封面">
                        <div class="admin-upload-list" :key="formData.imgUrl" v-if="formData.cover">
                            <template>
                                <img :src="formData.imgUrl">
                                <div class="admin-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="openImg(formData.imgUrl)"></Icon>
                                </div>
                            </template>
                        </div>
                    </FormItem>
                    <FormItem label="文章摘要">
                        <div class="conts" style="width: 70%">{{formData.summary}}</div>
                    </FormItem>
                    <FormItem label="文章内容">
                        <div class="conts" v-html="formData.content" style="width: 98%"></div>
                    </FormItem>
                </Form>
            </div>
        </Modal>
        <Modal v-model="saveModalVisible"
               :title="(formData.id ? '修改' : '新增') + '文章'"
               width="60%"
               @on-cancel="handleReset"
               :mask-closable="false"
               :closable="false"
               :styles="{top: '20px'}">
            <div class="modal-div">
                <Form ref="formSave" :model="formData" :label-width="70" :rules="ruleValidate">
                    <FormItem label="文章标题" prop="title">
                        <Input v-model="formData.title" clearable style="width: 50%"></Input>
                    </FormItem>
                    <FormItem label="活动" prop="activityname">
                        <Input v-model="formData.activityname" :readonly="true" style="width: 50%" icon="ios-search" @on-click="selectActivity"></Input>
                    </FormItem>
                    <FormItem label="封面">
                        <div class="admin-upload-list" v-for="item in uploadList" :key="item.url">
                            <template v-if="item.status === 'finished'">
                                <img :src="item.url">
                                <div class="admin-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click.native="openImg(item.url)"></Icon>
                                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                                </div>
                            </template>
                            <template v-else>
                                <Spin fix v-if="item.showProgress">
                                    <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                                </Spin>
                            </template>
                        </div>
                        <Upload
                                ref="upload"
                                :action="SERVER_HOST + 'upload/uploadFile'"
                                :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
                                :max-size="2048"
                                :on-exceeded-size="handleMaxSize"
                                :on-format-error="handleFormatError"
                                :on-success="handleSuccess"
                                :before-upload="handleBeforeUpload"
                                type="drag"
                                :show-upload-list="false"
                                style="display: inline-block;width:58px;"
                        >
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="camera" size="20"></Icon>
                            </div>
                        </Upload>
                    </FormItem>
                    <FormItem label="文章摘要">
                        <Input type="textarea" :autosize="{minRows: 2,maxRows: 5}" v-model="formData.summary" clearable style="width: 70%"></Input>
                    </FormItem>
                    <FormItem label="文章内容">
                        <UEditor id="article_intro" :config="config" ref="article_intro" style="width: 98%"></UEditor>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="primary" @click="save">保存</Button>
                <Button type="ghost" style="margin-left: 8px" @click="handleReset">取消</Button>
            </div>
        </Modal>
        <Modal v-model="activityModal"
               title="活动列表"
               @on-cancel="activityModal = false"
               width="80%"
               :mask-closable="false"
               :styles="{top: '20px'}">
            <activity-list ref="activity"></activity-list>
            <div slot="footer">
                <Button type="primary" @click="setActivity">确定</Button>
            </div>
        </Modal>
        <Modal v-model="imgModal"
               title="查看图片"
               @on-cancel="imgModal = false">
            <img :src="imgUrl" width="100%" height="100%">
            <div slot="footer">
                <Button type="primary" @click="imgModal = false">确定</Button>
            </div>
        </Modal>
    </div>
</template>
